<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Skydive Dashboard</title>

  <link rel="icon" type="image/png" href="/statics/img/skydive-logo-16x16.png" />

  <link rel="stylesheet" href="/statics/css/bootstrap.3.3.7.min.css" />
  <link rel="stylesheet" href="/statics/css/font-awesome.4.7.0.min.css" />
  <link rel="stylesheet" href="/statics/css/jquery-ui.1.10.1.css" media="all" type="text/css" />
  <link rel="stylesheet" href="/statics/css/skydive.css" />
  <link rel="stylesheet" href="/statics/css/transitions.css" />
  <link rel="stylesheet" href="/statics/css/graph-layout.css" />
  <link rel="stylesheet" href="/statics/css/tooltip.css" />
  <link rel="stylesheet" href="/statics/css/topology-options.css" />
  <link rel="stylesheet" href="/statics/css/switch.css" />
  <link rel="stylesheet" href="/statics/css/legend.css" />

  <!-- themes -->
  <link rel="stylesheet" href="/statics/css/themes/light/graph-layout.css" />
  <link rel="stylesheet" href="/statics/css/themes/light/skydive.css" />
  <link rel="stylesheet" href="/statics/css/themes/light/topology-options.css" />
  <link rel="stylesheet" href="/statics/css/themes/light/legend.css" />

  <script src="/statics/js/vendor/jquery.1.9.1.min.js" type="text/javascript"></script>
  <script src="/statics/js/vendor/jquery-ui.1.10.1.js" type="text/javascript"></script>

  <!-- <script src="/statics/js/vendor/vue-2.5.16.js"></script> -->
  <script src="/statics/js/vendor/vue.min-2.5.16.js"></script>
  <script src="/statics/js/vendor/vue-router.min-2.2.1.js"></script>
  <script src="/statics/js/vendor/vuex.min-2.1.2.js"></script>

  <script src="/statics/js/vendor/bootstrap.3.3.7.min.js"></script>
  <script src="/statics/js/vendor/d3.4.7.4.js"></script>
  <script src="/statics/js/vendor/d3-selection-multi.v1.min.js"></script>
  <script src="/statics/js/vendor/lscache.min.js"></script>
  <script src="/statics/js/vendor/popper.js"></script>
  <script src="/statics/js/vendor/tooltip.js"></script>
  <script src="/statics/js/vendor/v-tooltip.js"></script>
  <script src="/statics/js/vendor/vuejs-datepicker.js"></script>
  <script src="/statics/js/vendor/pure-uuid.js"></script>
  <script src="/statics/js/vendor/vuejs-markdown.js"></script>

  <script src="/statics/js/utils.js"></script>

  <script src="/statics/js/bundle.js"></script>
  <script src="/statics/js/api.js"></script>
  <script src="/statics/js/websocket.js"></script>

  <!-- components -->
  <script src="/statics/js/components/collapse.js"></script>
  <script src="/statics/js/components/panel.js"></script>
  <script src="/statics/js/components/notifications.js"></script>
  <script src="/statics/js/components/node-selector.js"></script>
  <script src="/statics/js/components/alert-form.js"></script>
  <script src="/statics/js/components/alert-list.js"></script>
  <script src="/statics/js/components/capture-form.js"></script>
  <script src="/statics/js/components/capture-list.js"></script>
  <script src="/statics/js/components/inject-form.js"></script>
  <script src="/statics/js/components/injection-list.js"></script>
  <script src="/statics/js/components/workflow.js"></script>
  <script src="/statics/js/components/tabs.js"></script>
  <script src="/statics/js/components/autocomplete.js"></script>
  <script src="/statics/js/components/buttons.js"></script>
  <script src="/statics/js/components/object-detail.js"></script>
  <script src="/statics/js/components/dynamic-table.js"></script>
  <script src="/statics/js/components/flow-table.js"></script>
  <script src="/statics/js/components/metrics-table.js"></script>
  <script src="/statics/js/components/routing-table.js"></script>
  <script src="/statics/js/components/rule-detail.js"></script>
  <script src="/statics/js/components/feature-table.js"></script>
  <script src="/statics/js/components/preference.js"></script>
  <script src="/statics/js/components/status.js"></script>
  <script src="/statics/js/components/topology-rules.js"></script>
  <script src="/statics/js/components/noderule-list.js"></script>
  <script src="/statics/js/components/noderule-form.js"></script>
  <script src="/statics/js/components/edgerule-list.js"></script>
  <script src="/statics/js/components/edgerule-form.js"></script>
  <script src="/statics/js/components/gremlin-console.js"></script>

  <!-- views -->
  <script src="/statics/js/components/login.js"></script>
  <script src="/statics/js/components/layout.js"></script>
  <script src="/statics/js/components/graph-layout.js"></script>
  <script src="/statics/js/components/topology.js"></script>

  <!-- UI config -->
  <script>
  var defaultConfig = {
    "bandwidth_absolute_active": 1,
    "bandwidth_absolute_alert": 1000,
    "bandwidth_absolute_warning": 100,
    "bandwidth_relative_active": 0.1,
    "bandwidth_relative_alert": 0.8,
    "bandwidth_relative_warning": 0.5,
    "bandwidth_threshold": "relative",
    "bandwidth_update_rate": 5,
    "ssh_enabled": false,
    "theme": "dark",
    "topology": {
      "favorites": {},
    },
  }

  var globalVars = << .GlobalVars >>

  uiConfig = $.extend({}, defaultConfig, globalVars["ui"]);

  var allPermissions = << .Permissions >>;
  </script>

  <script src="/statics/js/app.js"></script>
  <script src="/statics/js/bundle.js"></script>

  <!-- extra assets -->
  << range $i, $asset := .ExtraAssets >>
    << if eq $asset.Ext ".css" >>
  <link rel="stylesheet" href="<< $asset.Filename >>" />
    << end >>
    << if eq $asset.Ext ".js" >>
  <script src="<< $asset.Filename >>"></script>
    << end >>
  << end >>
</head>

<body>

  <div id="app">

    <nav id="navbar" class="navbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Skydive
            <span class="mode">{{service}} {{version}}</span>
          </a>
        </div>
        <div class="collapse navbar-collapse" v-if="logged">
          <ul class="nav navbar-nav" style="visibility: hidden">
            <router-link tag="li" to="/topology">
              <a>Topology</a>
            </router-link>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <router-link tag="li" to="/preference">
              <a>
                Preferences
              </a>
            </router-link>
            <li>
              <a href="http://skydive.network/documentation/" target="_blank">
                Documentation
              </a>
            </li>
            <router-link tag="li" to="/status">
              <a>
                Status
              </a>
            </router-link>
            <router-link tag="li" to="/logout">
              <a>
                Logout
                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true" title="Connection lost" v-if="!connected"></i>
              </a>
            </router-link>
          </ul>
        </div>
      </div>
    </nav>

    <transition name="slide" mode="out-in">
      <router-view></router-view>
    </transition>

    <notifications></notifications>
  </div>
</body>
</html>
